<script setup lang="ts">
//表明引用，要求响应对象与表单属性ref的值保持一致
import {onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {add} from "@/api/set/Supplier";
import {getUser} from "@/utils/session";
import {ElMessage} from "element-plus";
let user = {}
//声明属性
const props = defineProps({
  "visible": {
    type: Boolean,
    default: false
  }
})
const ruleFormRef = ref(null)
//表单数据
const ruleForm = ref({
  name: "",
  code: "",
  beginMoney: "",
  readyMoney: "",
  user: "",
  mobile: "",
  phone: "",
  qq: "",
  address: "",
  firstUser: "",
  eid:getUser().eid
})
//校验对象定义 对象的属性是要校验的属性
const rules = reactive({
  name: [{
    required: true,
    message: '请输入供应商名称',
    trigger: 'blur'
  }],
  code: [{
    required: true,
    message: '请输入供应商编码',
    trigger: 'blur'
  }]
})
//取消路由跳转
const router = useRouter();
//新增供应商
async function save(){
  let res = await add(ruleForm.value)
  if(res.code==200){
    ElMessage({
      message:"保存成功",
      type:"success"
    })
    ruleForm.value={}
  }
}
//---------------生命周期---------------
onMounted(() => {
  user = getUser();
  console.log("user>>>",user)
})
</script>

<template>
  <div>
    <div style="margin: 0 auto;width: 500px; height: 600px">
    <el-form ref="ruleFormRef" style="max-width: 400px;" :model="ruleForm" :rules="rules" label-width="100px"
             class="demo-ruleForm" status-icon>
      <el-form-item label="供应商名称" prop="name">
        <el-input v-model="ruleForm.name"  placeholder="请输入供应商名称"/>
      </el-form-item>
      <el-form-item label="供应商编码" prop="code">
        <el-input v-model="ruleForm.code" placeholder="请输入供应商编码"/>
      </el-form-item>
      <el-form-item label="初期应付款">
        <el-input v-model="ruleForm.beginMoney" placeholder="请输入初期应付款"/>
      </el-form-item>
      <el-form-item label="初期预付款">
        <el-input v-model="ruleForm.readyMoney" placeholder="请输入初期预付款"/>
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="ruleForm.user" placeholder="请输入联系人"/>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="ruleForm.mobile" placeholder="请输入手机号"/>
      </el-form-item>
      <el-form-item label="座机">
        <el-input v-model="ruleForm.phone" placeholder="请输入座机"/>
      </el-form-item>
      <el-form-item label="QQ/邮箱">
        <el-input v-model="ruleForm.qq" placeholder="请输入QQ/邮箱"/>
      </el-form-item>
      <el-form-item label="联系地址">
        <el-input v-model="ruleForm.address" placeholder="请输入联系地址"/>
      </el-form-item>
      <el-form-item label="首要联系人">
        <el-input v-model="ruleForm.firstUser" placeholder="请输入首要联系人"/>
      </el-form-item>
    </el-form>
      <div style="margin: 50px auto;width: 200px;">
      <el-button type="primary" @click="save">提交</el-button>
      <el-button @click="router.push({path:'/supplier/edit'})">取消</el-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
